<template>
  <div class="hr-reports-page">
    <!-- 顶部数据概览 -->
    <el-row :gutter="20" class="overview-section">
      <el-col :xs="24" :sm="12" :md="6" v-for="card in overviewCards" :key="card.id">
        <el-card class="overview-card" :class="card.type">
          <div class="card-content">
            <div class="card-icon">
              <el-icon :size="32"><component :is="card.icon" /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ card.value }}</div>
              <div class="card-label">{{ card.label }}</div>
              <div v-if="card.trend" class="card-trend" :class="card.trend > 0 ? 'positive' : 'negative'">
                <el-icon><component :is="card.trend > 0 ? 'CaretTop' : 'CaretBottom'" /></el-icon>
                <span>{{ Math.abs(card.trend) }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 报表导航 -->
    <el-card class="report-nav-card">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 员工分析报表 -->
        <el-tab-pane label="员工分析" name="employee">
          <el-row :gutter="20">
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <div class="chart-header">
                    <span>员工结构分析</span>
                    <el-select v-model="employeeChartType" size="small" style="width: 120px;">
                      <el-option label="部门分布" value="department" />
                      <el-option label="职级分布" value="level" />
                      <el-option label="学历分布" value="education" />
                      <el-option label="年龄分布" value="age" />
                    </el-select>
                  </div>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><PieChart /></el-icon>
                    <p>员工结构分布图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <span>员工增长趋势</span>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><TrendCharts /></el-icon>
                    <p>员工增长趋势图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card>
                <template #header>
                  <span>员工详细统计</span>
                </template>
                <el-table :data="employeeStats" border>
                  <el-table-column prop="department" label="部门" />
                  <el-table-column prop="total" label="总人数" />
                  <el-table-column prop="male" label="男" />
                  <el-table-column prop="female" label="女" />
                  <el-table-column prop="avgAge" label="平均年龄" />
                  <el-table-column prop="avgWorkYears" label="平均司龄" />
                  <el-table-column prop="turnoverRate" label="离职率">
                    <template #default="{ row }">
                      {{ row.turnoverRate }}%
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <!-- 考勤分析报表 -->
        <el-tab-pane label="考勤分析" name="attendance">
          <el-row :gutter="20">
            <el-col :xs="24" :lg="16">
              <el-card>
                <template #header>
                  <div class="chart-header">
                    <span>考勤趋势分析</span>
                    <el-date-picker
                      v-model="attendanceDateRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      size="small"
                    />
                  </div>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><DataLine /></el-icon>
                    <p>考勤趋势图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :lg="8">
              <el-card>
                <template #header>
                  <span>考勤状态分布</span>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><PieChart /></el-icon>
                    <p>考勤状态分布图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card>
                <template #header>
                  <span>异常考勤明细</span>
                </template>
                <el-table :data="abnormalAttendance" border>
                  <el-table-column prop="date" label="日期" width="120" />
                  <el-table-column prop="employeeName" label="员工姓名" width="120" />
                  <el-table-column prop="department" label="部门" width="120" />
                  <el-table-column prop="type" label="异常类型" width="100">
                    <template #default="{ row }">
                      <el-tag :type="getAttendanceType(row.type)">{{ row.type }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="times" label="次数" width="80" />
                  <el-table-column prop="remark" label="备注" min-width="150" />
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <!-- 薪资分析报表 -->
        <el-tab-pane label="薪资分析" name="salary">
          <el-row :gutter="20">
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <div class="chart-header">
                    <span>薪资分布分析</span>
                    <el-select v-model="salaryMonth" size="small" style="width: 150px;">
                      <el-option label="2024-01" value="2024-01" />
                      <el-option label="2023-12" value="2023-12" />
                      <el-option label="2023-11" value="2023-11" />
                    </el-select>
                  </div>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><Histogram /></el-icon>
                    <p>薪资分布直方图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <span>部门薪资对比</span>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><Histogram /></el-icon>
                    <p>部门薪资对比图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card>
                <template #header>
                  <span>薪资统计表</span>
                </template>
                <el-table :data="salaryStats" border show-summary :summary-method="getSalarySummaries">
                  <el-table-column prop="department" label="部门" />
                  <el-table-column prop="count" label="人数" />
                  <el-table-column prop="avgSalary" label="平均薪资">
                    <template #default="{ row }">
                      ¥{{ formatNumber(row.avgSalary) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="totalSalary" label="薪资总额">
                    <template #default="{ row }">
                      ¥{{ formatNumber(row.totalSalary) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="maxSalary" label="最高薪资">
                    <template #default="{ row }">
                      ¥{{ formatNumber(row.maxSalary) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="minSalary" label="最低薪资">
                    <template #default="{ row }">
                      ¥{{ formatNumber(row.minSalary) }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <!-- 招聘分析报表 -->
        <el-tab-pane label="招聘分析" name="recruitment">
          <el-row :gutter="20">
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <span>招聘渠道效果</span>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><PieChart /></el-icon>
                    <p>招聘渠道分布图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <span>招聘进度</span>
                </template>
                <div class="recruitment-progress">
                  <div class="progress-item" v-for="item in recruitmentProgress" :key="item.stage">
                    <div class="stage-info">
                      <span class="stage-name">{{ item.stage }}</span>
                      <span class="stage-count">{{ item.count }}人</span>
                    </div>
                    <el-progress :percentage="item.percentage" :color="item.color" />
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card>
                <template #header>
                  <span>岗位需求统计</span>
                </template>
                <el-table :data="positionStats" border>
                  <el-table-column prop="position" label="岗位" />
                  <el-table-column prop="demand" label="需求人数" />
                  <el-table-column prop="applied" label="已投递" />
                  <el-table-column prop="interviewed" label="已面试" />
                  <el-table-column prop="offered" label="已录用" />
                  <el-table-column prop="onboarded" label="已入职" />
                  <el-table-column prop="fillRate" label="完成率">
                    <template #default="{ row }">
                      <el-progress :percentage="row.fillRate" :color="getProgressColor(row.fillRate)" />
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <!-- 培训分析报表 -->
        <el-tab-pane label="培训分析" name="training">
          <el-row :gutter="20">
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <span>培训课程统计</span>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><Histogram /></el-icon>
                    <p>培训课程统计图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <span>培训参与度</span>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><DataLine /></el-icon>
                    <p>培训参与度趋势图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card>
                <template #header>
                  <span>培训效果评估</span>
                </template>
                <el-table :data="trainingStats" border>
                  <el-table-column prop="courseName" label="课程名称" />
                  <el-table-column prop="participants" label="参与人数" />
                  <el-table-column prop="avgScore" label="平均分数" />
                  <el-table-column prop="satisfaction" label="满意度">
                    <template #default="{ row }">
                      <el-rate v-model="row.satisfaction" disabled show-score />
                    </template>
                  </el-table-column>
                  <el-table-column prop="completionRate" label="完成率">
                    <template #default="{ row }">
                      {{ row.completionRate }}%
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>

        <!-- 绩效分析报表 -->
        <el-tab-pane label="绩效分析" name="performance">
          <el-row :gutter="20">
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <span>绩效分布</span>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><PieChart /></el-icon>
                    <p>绩效等级分布图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :xs="24" :lg="12">
              <el-card>
                <template #header>
                  <span>部门绩效对比</span>
                </template>
                <div class="chart-container" style="height: 350px;">
                  <div class="chart-placeholder">
                    <el-icon size="64"><Histogram /></el-icon>
                    <p>部门绩效对比图</p>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card>
                <template #header>
                  <span>绩效排名</span>
                </template>
                <el-table :data="performanceRanking" border>
                  <el-table-column type="index" label="排名" width="80" />
                  <el-table-column prop="employeeName" label="员工姓名" />
                  <el-table-column prop="department" label="部门" />
                  <el-table-column prop="position" label="职位" />
                  <el-table-column prop="score" label="绩效分数" />
                  <el-table-column prop="level" label="绩效等级">
                    <template #default="{ row }">
                      <el-tag :type="getPerformanceType(row.level)">{{ row.level }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="bonus" label="绩效奖金">
                    <template #default="{ row }">
                      ¥{{ formatNumber(row.bonus) }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 报表导出 -->
    <el-card class="export-card">
      <div class="export-content">
        <div class="export-info">
          <el-icon size="32"><Download /></el-icon>
          <div>
            <h4>报表导出</h4>
            <p>支持导出Excel、PDF格式的报表数据</p>
          </div>
        </div>
        <div class="export-actions">
          <el-button type="primary" @click="handleExport('excel')">
            <el-icon><Document /></el-icon>
            导出Excel
          </el-button>
          <el-button type="success" @click="handleExport('pdf')">
            <el-icon><DocumentCopy /></el-icon>
            导出PDF
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeTab = ref('employee')
const employeeChartType = ref('department')
const attendanceDateRange = ref([])
const salaryMonth = ref('2024-01')

// 概览卡片
const overviewCards = ref([
  { id: 1, label: '在职员工', value: '168人', icon: 'UserFilled', type: 'primary', trend: 5.2 },
  { id: 2, label: '本月入职', value: '12人', icon: 'Plus', type: 'success', trend: 8.3 },
  { id: 3, label: '本月离职', value: '3人', icon: 'Minus', type: 'warning', trend: -2.1 },
  { id: 4, label: '薪资总额', value: '¥285万', icon: 'Money', type: 'info', trend: 3.5 }
])

// 员工统计数据
const employeeStats = ref([
  { department: '技术部', total: 45, male: 32, female: 13, avgAge: 28, avgWorkYears: 3.2, turnoverRate: 5.2 },
  { department: '销售部', total: 38, male: 20, female: 18, avgAge: 30, avgWorkYears: 2.8, turnoverRate: 8.5 },
  { department: '财务部', total: 15, male: 6, female: 9, avgAge: 32, avgWorkYears: 4.5, turnoverRate: 3.2 },
  { department: '人事部', total: 12, male: 4, female: 8, avgAge: 29, avgWorkYears: 3.8, turnoverRate: 4.1 }
])

// 异常考勤数据
const abnormalAttendance = ref([
  { date: '2024-01-15', employeeName: '张三', department: '技术部', type: '迟到', times: 1, remark: '地铁延误' },
  { date: '2024-01-15', employeeName: '李四', department: '销售部', type: '早退', times: 1, remark: '家中有事' }
])

// 薪资统计数据
const salaryStats = ref([
  { department: '技术部', count: 45, avgSalary: 18500, totalSalary: 832500, maxSalary: 35000, minSalary: 8000 },
  { department: '销售部', count: 38, avgSalary: 15200, totalSalary: 577600, maxSalary: 28000, minSalary: 6000 },
  { department: '财务部', count: 15, avgSalary: 16800, totalSalary: 252000, maxSalary: 25000, minSalary: 9000 },
  { department: '人事部', count: 12, avgSalary: 14500, totalSalary: 174000, maxSalary: 22000, minSalary: 7500 }
])

// 招聘进度
const recruitmentProgress = ref([
  { stage: '简历筛选', count: 156, percentage: 100, color: '#409eff' },
  { stage: '初试', count: 89, percentage: 57, color: '#67c23a' },
  { stage: '复试', count: 45, percentage: 29, color: '#e6a23c' },
  { stage: 'Offer', count: 23, percentage: 15, color: '#f56c6c' },
  { stage: '入职', count: 18, percentage: 12, color: '#909399' }
])

// 岗位统计
const positionStats = ref([
  { position: 'Java开发', demand: 10, applied: 45, interviewed: 20, offered: 8, onboarded: 6, fillRate: 60 },
  { position: '前端开发', demand: 8, applied: 38, interviewed: 15, offered: 6, onboarded: 5, fillRate: 63 },
  { position: '产品经理', demand: 5, applied: 28, interviewed: 12, offered: 4, onboarded: 3, fillRate: 60 },
  { position: '销售代表', demand: 15, applied: 52, interviewed: 25, offered: 12, onboarded: 10, fillRate: 67 }
])

// 培训统计
const trainingStats = ref([
  { courseName: 'Java进阶培训', participants: 25, avgScore: 85, satisfaction: 4.5, completionRate: 92 },
  { courseName: '产品思维课程', participants: 18, avgScore: 88, satisfaction: 4.7, completionRate: 95 },
  { courseName: '销售技巧培训', participants: 30, avgScore: 82, satisfaction: 4.3, completionRate: 88 }
])

// 绩效排名
const performanceRanking = ref([
  { employeeName: '张三', department: '技术部', position: '技术总监', score: 95, level: 'S', bonus: 8000 },
  { employeeName: '李四', department: '销售部', position: '销售经理', score: 92, level: 'A', bonus: 6000 },
  { employeeName: '王五', department: '技术部', position: '高级工程师', score: 88, level: 'A', bonus: 5500 },
  { employeeName: '赵六', department: '财务部', position: '财务经理', score: 85, level: 'B', bonus: 4000 }
])

// 方法
const formatNumber = (value) => {
  if (typeof value === 'number') {
    return value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
  }
  return '0.00'
}

const getAttendanceType = (type) => {
  const map = {
    '迟到': 'warning',
    '早退': 'warning',
    '缺勤': 'danger'
  }
  return map[type] || 'info'
}

const getProgressColor = (rate) => {
  if (rate >= 80) return '#67c23a'
  if (rate >= 60) return '#e6a23c'
  return '#f56c6c'
}

const getPerformanceType = (level) => {
  const map = {
    'S': 'danger',
    'A': 'success',
    'B': 'primary',
    'C': 'warning'
  }
  return map[level] || 'info'
}

const getSalarySummaries = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    
    const values = data.map(item => Number(item[column.property]))
    if (column.property === 'count' || column.property === 'avgSalary' || 
        column.property === 'totalSalary' || column.property === 'maxSalary' || 
        column.property === 'minSalary') {
      const sum = values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      
      if (column.property === 'count') {
        sums[index] = sum
      } else {
        sums[index] = '¥' + sum.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
      }
    } else {
      sums[index] = ''
    }
  })
  return sums
}

const handleTabChange = (tabName) => {
  console.log('Tab changed:', tabName)
}

const handleExport = (format) => {
  ElMessage.success(`正在导出${format.toUpperCase()}格式报表...`)
}
</script>

<style scoped>
.hr-reports-page {
  padding: 0;
}

.overview-section {
  margin-bottom: 20px;
}

.overview-card {
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.overview-card.primary { border-left: 4px solid #409eff; }
.overview-card.success { border-left: 4px solid #67c23a; }
.overview-card.warning { border-left: 4px solid #e6a23c; }
.overview-card.info { border-left: 4px solid #909399; }

.card-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.overview-card.primary .card-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.overview-card.success .card-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.overview-card.warning .card-icon { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.overview-card.info .card-icon { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }

.card-info {
  flex: 1;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 6px;
}

.card-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.card-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.card-trend.positive { color: #67c23a; }
.card-trend.negative { color: #f56c6c; }

.report-nav-card {
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  padding: 20px 0;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px dashed #dcdfe6;
  color: #909399;
}

.chart-placeholder p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.recruitment-progress {
  padding: 20px;
}

.progress-item {
  margin-bottom: 20px;
}

.stage-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stage-name {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.stage-count {
  font-size: 14px;
  color: #909399;
}

.export-card {
  margin-top: 20px;
}

.export-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
}

.export-info {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
}

.export-info h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.export-info p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.export-actions {
  display: flex;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .export-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .export-actions {
    width: 100%;
    flex-direction: column;
  }
  
  .export-actions .el-button {
    width: 100%;
  }
}
</style>
